<template>
  <div class="filters-panl w-100 pos-ab">
    <transition name="van-slide-down">
      <div v-show="visible" class="filters flex-row-start-center van-hairline--bottom">
        <slot></slot>
        <div class="text-r px-10 py-10 main-bg">
          <slot name="bottom">
            <van-space>
              <van-button class="px-30" type="primary" size="mini" @click="onQuery">搜索</van-button>
              <van-button class="px-30" type="default" size="mini" @click="visible = false">关闭</van-button>
            </van-space>
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, defineEmits, computed } from 'vue';

import { showNotify } from 'vant';
import { showConfirmDialog } from 'vant';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'onConfirm']);

const visible = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val);
  }
});

function onQuery() {
  emit('onConfirm');
}
</script>
<style scoped lang="scss">
.filters-panl {
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
}

.filters {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
</style>
